<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no"/>
<title>打分页</title>
<link href="css/yq.css" type="text/css" rel="stylesheet" />
<link href="css/font.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script type="text/javascript" src="js/score.js"></script>
<script>
$(function(){
	var _w = parseInt($(window).width());//获取浏览器的宽度
    $(".actHeader img").load(function() {
    	realHeight = this.height;
		scrollHeight=realHeight+39;
    });
	$(window).scroll(function() {
	if($(window).scrollTop()>=scrollHeight){
	$(".searchBox").addClass("searchfixed");
	}else{
	$(".searchBox").removeClass("searchfixed");	
	} 
	});
});
</script>
<script type="text/javascript">
			$(function() {
				/*瀑布流开始*/
				var container = $('#ulTeacher');
				var loading = $('#imloading');
				// 初始化loading状态
				loading.data("on", true);				
				/*模拟从后台获取到的数据*/
				var sqlJson = [{
					'src': 'images/toux.jpg',
					'name': '王小华',
					'poll': '45212',
					'number1':'王豆豆',
					'number2':'小花',
					'score':'110'
				}, {
					'src': 'images/toux.jpg',
					'name': '王小w华',
					'poll': '45212',
					'number1':'王豆豆',
					'number2':'小花',
					'score':'110'
				}, {
					'src': 'images/toux.jpg',
					'name': '王z小华',
					'poll': '45212',
					'number1':'王豆豆',
					'number2':'小花',
					'score':'110'
				}];
				$(window).scroll(function() { 
					if (!loading.data("on")) return;
					
					var itemNum = $('#waterfull').find('.liteacher').length;
					var itemArr = [];
					itemArr[0] = $('#waterfull').find('.liteacher').eq(itemNum - 1).offset().top + $('#waterfull').find('.liteacher').eq(itemNum - 1)[0].offsetHeight;
					itemArr[1] = $('#waterfull').find('.liteacher').eq(itemNum - 2).offset().top + $('#waterfull').find('.liteacher').eq(itemNum - 1)[0].offsetHeight;
					itemArr[2] = $('#waterfull').find('.liteacher').eq(itemNum - 3).offset().top + $('#waterfull').find('.liteacher').eq(itemNum - 1)[0].offsetHeight;
					var maxTop = Math.max.apply(null, itemArr);
					if (maxTop < $(window).height() + $(document).scrollTop()) {
						//加载更多数据
						loading.data("on", false).fadeIn();
						(function(sqlJson) {
							if (itemNum > 13) {
								loading.text('只有这么多了！');
							} else {
								var html = "";
								for (var i in sqlJson) {
									html +="<li class='liteacher'>"+ "<div class='memberAll'><div class='memberPic'><img src='" + sqlJson[i].src + "'></div>";
									html +="<div class='memberinfo'><div class='divHtitle'>"+sqlJson[i].name+"</div>";
									html +="<div class='syValue'><span>"+sqlJson[i].poll+"</span><em>活力值</em></div>";
								    html +="<div class='syMember'>组员:<span>"+sqlJson[i].number1+"</span><span>"+sqlJson[i].number2+"</span></div>";
									html +="</div></div>";
                                    html +="<div class='syBtn'>为TA打分</div></li>";
								}
								/*模拟ajax请求数据时延时800毫秒*/
								var time = setTimeout(function() {
									var $newElems = $(html).css({
										opacity: 0
									}).appendTo(container);
									$newElems.imagesLoaded(function() {
										$newElems.animate({
											opacity: 1
										}, 10);	
										container.masonry('appended', $newElems, true);
										loading.data("on", true).fadeOut();
										clearTimeout(time);
									});
									$(".syBtn").click(function(){
									$(".mask").css('display', 'block');
									$(".loginBox").css('display', 'block');
									});
									$(".spanClose").click(function(){
									$(".mask").css('display', 'none');
									$(".loginBox").css('display', 'none');
									$(".uploadTxtFix").val(''); 
									});
								}, 10)
							}
						})(sqlJson);
					}
				});
			})
		</script>
</head>	
<body style="background-color:#fcf3f0">
<div class="mask"></div>
<!------------登录------------------------->
<div class="loginBox borderRadius">
	<span class="icon iconfont icon-chahao spanClose"></span>
    <h1>用户登录</h1>
    <div class="divregist boxSize">
        <input placeholder="请输入账号" class="uploadTxt uploadTxtFix" type="tel"> 
        <div class="tipinfo"></div> 
    </div>
    <div class="divregist login boxSize">
        <input id="password" type="password" placeholder="请输入密码" class="uploadTxtFix"/>
        <div class="tipinfo"></div> 
    </div>
    <span id="registeFailInfo" class="registeFail">登录失败</span>
    <input type="button" value="立即登录" class="loginBtn borderRadius">
</div>
<!------------登录END------------------------->
<!-------------header------------------------->
<div class="actHeader">  
	<img alt="" src="images/banner.jpg" width="100%"/>        
</div>
<!-------------header END------------------------->
<!-------------search------------------------->
<div class="searchBox">
    <div class="search">
        <input class="txt"  placeholder="输入队名进行搜索"/>
        <span class="icon iconfont searchDel"></span>
    </div>
    <input type="submit" class="searchBtn" value="">
</div>
<!-------------search  END------------------------->
<!-------------main------------------------->
<div id="main" style="position:relative">
    <div class="teacherBox" id="waterfull">
        <ul class="ulTeacher" id="ulTeacher">
        	<li class="liteacher">
                <div class="memberAll">
                    <div class="memberPic"><img src="images/toux.jpg"></div>
                    <div class="memberinfo">
                        <div class="divHtitle">极限挑dsd战队</div>
                        <div class="syValue">1223<em>活力值</em></div>
                        <div class="syMember">组员:<span>程思羽</span><span>钱佳玲</span></div>
                    </div>
                </div>
                 <div class="syBtn">为TA打分</div>
            </li>
          <li class="liteacher">
                <div class="memberAll">
                    <div class="memberPic"><img src="images/toux.jpg"></div>
                    <div class="memberinfo">
                        <div class="divHtitle">极限挑dsd战队</div>
                        <div class="syValue">1223<em>活力值</em></div>
                        <div class="syMember">组员:<span>程思羽</span><span>钱佳玲</span></div>
                    </div>
                </div>
                 <div class="syBtn">为TA打分</div>
            </li>
           <li class="liteacher">
                <div class="memberAll">
                    <div class="memberPic"><img src="images/toux.jpg"></div>
                    <div class="memberinfo">
                        <div class="divHtitle">极限挑dsd战队</div>
                        <div class="syValue">1223<em>活力值</em></div>
                        <div class="syMember">组员:<span>程思羽</span><span>钱佳玲</span></div>
                    </div>
                </div>
                 <div class="syBtn">为TA打分</div>
            </li>
           <li class="liteacher">
                <div class="memberAll">
                    <div class="memberPic"><img src="images/toux.jpg"></div>
                    <div class="memberinfo">
                        <div class="divHtitle">极限挑dsd战队</div>
                        <div class="syValue">1223<em>活力值</em></div>
                        <div class="syMember">组员:<span>程思羽</span><span>钱佳玲</span></div>
                    </div>
                </div>
                 <div class="syBtn">为TA打分</div>
            </li>
            <li class="liteacher">
                <a href="">
                <div class="memberAll">
                    <div class="memberPic"><img src="images/toux.jpg"></div>
                    <div class="memberinfo">
                        <div class="divHtitle">极限挑dsd战队</div>
                        <div class="syValue">1223<em>活力值</em></div>
                        <div class="syMember">组员:<span>程思羽</span><span>钱佳玲</span></div>
                    </div>
                </div>
                 <div class="syBtn">为TA打分</div>
                </a>
            </li>
        </ul>
    </div>
   <div id="imloading" class="loading">加载中</div>
</div>
<!-------------main END------------------------->
<!-------------botNav------------------------>
<div class="divfooter bot50">
    <p>浙报新媒体技术支持</p>
    <p class="pFooter">浙江日报新闻发展有限公司 | Copyright © 2014 - 2015</p>
</div>
<!-------------botNav END------------------------->
</body>
</html>